<template>
  <div>   
      <header class="head">
           <router-link to="/jlcy" tag="span" class="s"><返回</router-link>
          <p>我的订单</p>
      </header>
      <div class="box">
          <div class="fu">
              <div>
                  <span>全部</span>
              </div>
              <div>
                  <span>待付款</span>
              </div>
          </div>
      </div>
  </div>
</template>
<script>
export default {

}
</script>
<style lang="less" scoped>
    .px2rem(@name, @px) {
        @{name}: @px / 75 * 1rem;
    }
.head{
    position: relative;
    width: 100%;
    .px2rem(height,50);
    background: red;
    display: flex;
    // justify-content: center;
    p{ 
       width: 100%;
        text-align: center;
        .px2rem(font-size, 30);
        color: #fff;
        font-family: '楷体';
        line-height: 1.8;
    }
    span{
        position: absolute;
        top: 0;
        left: 0;
        .px2rem(width, 100);
        .px2rem(height, 50);
        .px2rem(font-size, 20);
        text-align: center;
        line-height: 2.6;
    }
}
.box{
    .px2rem(height, 1000);
    background: pink;
}
.fu{
    .px2rem(height, 60);
    .px2rem(line-height,60);
    background: #fff;
    border-bottom: 1px solid skyblue;
    display: flex;
    div{
        flex: 1;
        text-align: center;
        &:hover{
            border-bottom: 3px solid skyblue;
        }
    }
}

</style>
